<template>
  <div class="main">
    <div class="slideNav">
      <div class="logo">
        <img src="/img/logo.png" alt="logo" @click="" />
      </div>
      <el-menu router :default-active="this.$route.path" class="el-menu-vertical-demo" @open="handleOpen"
               @close="handleClose" background-color="#f5f5f5" menu-trigger="click" text-color="#333333"
               active-text-color="#d83030">
        <el-menu-item index="/Main/Home">
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/Main/Management">
          <span slot="title">商品管理</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <span>商品订单</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/Main/proOrder">商品订单</el-menu-item>
            <el-menu-item index="/Main/manage">售后管理</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="/Main/Statistics">
          <span slot="title">数据统计</span>
        </el-menu-item>
        <el-menu-item index="/Main/Evaluate">
          <span slot="title">评价管理</span>
        </el-menu-item>
        <el-menu-item index="/Main/Platform">
          <span slot="title">平台管理</span>
        </el-menu-item>
        <el-menu-item index="/Main/User">
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/Main/Authority">
          <span slot="title">权限管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 主体内容 -->
    <div class="right">
      <Header></Header>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from "../components/Header.vue";
// import {
//   Document,
//   Menu as IconMenu,
//   Location,
//   Setting,
// } from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  height: 100vh;
  width: 100%;
  background: #eeeeee;
  box-sizing: border-box;
  overflow: hidden;

  .slideNav {
    position: relative;
    width: 10%;
    padding: 20px 0 0;
    // width: 400px;
    background: #f5f5f5;
    text-align: center;
    box-sizing: border-box;

    :deep(.el-menu-item.is-active) {
      background-color: #f0f0f0 !important;
      border-right: 4px solid #ffb300;
    }

    :deep(.is-active) .el-submenu__title {
      background-color: #f0f0f0 !important;
      border-right: 4px solid #ffb300;

      .el-menu-item {
        background: #999999;
      }
    }

    .logo {
      margin-bottom: 20px;
      box-sizing: border-box;

      img {
        width: 80%;
        border-radius: 10px;
        box-shadow: 0 0 10px 1px #dbdbdf;
      }
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
      min-height: 800px;
    }

     .el-submenu__icon-arrow {
      display: none;
    }

     .el-radio-button__inner {
      padding: 0;
      background: transparent;
      color: black;
      border: 0;

      span {
        padding: 16px 20px;
        font-size: 24px;
        box-sizing: border-box;
      }
    }

    .el-menu {
      border: 0;

      .el-submenu__title {
        background: transparent;
      }

      .el-menu-item.is-active {
        color: #ff9100 !important;
      }
    }
  }

  // 主体内容
  .right {
    width: 90%;
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    background: #f3f3f3;
    box-shadow: 0 0 10px #dbdbdf;
    border-radius: 20px;
    overflow-y: scroll;

    .content{
    }
  }
}
</style>

<!--<style lang="scss" scoped>-->
<!--.main {-->
<!--  display: flex;-->
<!--  width: 100%;-->
<!--  background: #eeeeee;-->
<!--  box-sizing: border-box;-->
<!--  overflow: hidden;-->

<!--  .slideNav {-->
<!--    position: relative;-->
<!--    padding: 20px 0 0;-->
<!--    // width: 400px;-->
<!--    background: #f5f5f5;-->
<!--    text-align: center;-->
<!--    box-sizing: border-box;-->

<!--    :deep(.el-menu-item.is-active) {-->
<!--      background-color: #f0f0f0 !important;-->
<!--      border-right: 4px solid red;-->
<!--    }-->

<!--    :deep(.is-active) .el-submenu__title {-->
<!--      background-color: #f0f0f0 !important;-->
<!--      border-right: 4px solid red;-->

<!--      .el-menu-item {-->
<!--        background: #999999;-->
<!--      }-->
<!--    }-->

<!--    .logo {-->
<!--      margin-bottom: 20px;-->
<!--      box-sizing: border-box;-->

<!--      img {-->
<!--        width: 80%;-->
<!--        border-radius: 20px;-->
<!--        box-shadow: 0 0 10px 1px #dbdbdf;-->
<!--      }-->
<!--    }-->

<!--    .el-menu-vertical-demo:not(.el-menu&#45;&#45;collapse) {-->
<!--      min-height: 800px;-->
<!--    }-->

<!--    /deep/ .el-submenu__icon-arrow {-->
<!--      display: none;-->
<!--    }-->

<!--    /deep/ .el-radio-button__inner {-->
<!--      padding: 0;-->
<!--      background: transparent;-->
<!--      color: black;-->
<!--      border: 0;-->

<!--      span {-->
<!--        padding: 16px 20px;-->
<!--        font-size: 24px;-->
<!--        box-sizing: border-box;-->
<!--      }-->
<!--    }-->

<!--    /deep/ .el-menu {-->
<!--      border: 0;-->

<!--      .el-submenu__title {-->
<!--        background: transparent;-->
<!--      }-->

<!--      .el-menu-item.is-active {-->
<!--        color: red !important;-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  // 主体内容-->
<!--  .right {-->
<!--    width: 84%;-->
<!--    margin: 20px;-->
<!--    padding: 40px;-->
<!--    box-sizing: border-box;-->
<!--    background: #f3f3f3;-->
<!--    box-shadow: 0 0 10px #dbdbdf;-->
<!--    border-radius: 20px;-->
<!--  }-->
<!--}-->

<!--</style>-->
